<template>
    <section>
        <div v-if="multiple">
            <el-upload
                :file-list="showData"
                :action="apiHost + '/file/upload'"
                :show-file-list="true"
                :headers="headers"
                list-type="picture-card"
                :multiple="multiple"

                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
            >
                <i class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
        </div>
        <div v-else>
            <el-upload
                class="avatar-uploader"
                :action="apiHost + '/file/upload'"
                :show-file-list="false"
                :on-success="handleSuccess"
                :headers="headers"
            >
                <img :src="showData" v-if="showData" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
        </div>

        <el-dialog :visible.sync="dialogImageVisible" :append-to-body="true">
            <div style="text-align:center;">
            <el-image :src="dialogImageUrl" fit="cover"/>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {getToken} from '@/utils/auth'
import {Common} from "@/utils/common";

export default {
    name: 'UploadImage',
    props: {
      value: null,
      multiple: {
        type: Boolean,
        default: true
      }
    },
    data() {
        return {
            resData:[],

            dialogImageVisible: false,
            dialogImageUrl: '',
            apiHost: process.env.VUE_APP_BASE_API,
            headers: {'X-Token': getToken()}
        }
    },
    computed: {
        showData() {
            this.resData = this.value
            return this.resData
        }
    },
    methods: {
        handleSuccess(response, file, fileList) {
            let that = this
            if(this.multiple){
                //多图上传时，此处可解决on-success只进入一次问题
                if (!fileList) return
                if (fileList.every(item => item.status === 'success')) {
                    fileList.map(item => {
                        if (item.response) {
                            that.resData.push({
                                url: item.response.data
                            })
                        }
                    })
                }

                that.$emit('refresh',that.resData)
            } else {
                that.resData = response.data
                that.$emit('refresh',that.resData)
            }

            return false
        },

        handleRemove(e) {
            this.resData = this.resData.filter(v => v.url !== e.url)
            this.$emit('refresh',Common.deepClone(this.resData))
        },
        handlePreview(e) {
            this.dialogImageVisible = true
            this.dialogImageUrl = e.url
        },
    }
}
</script>

<style scoped>
::v-deep .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 80px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 80px;
    height: 80px;
}

::v-deep .el-upload-list__item {
    transition: none !important;
}

</style>
